<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <strong>Social Media Button</strong> <small>Usage ex.</small><code style="text-transform:lowercase">&lt;button class="btn btn-facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code>
            <div class="card-actions">
              <a href="#" class="btn-setting"><i class="icon-settings"></i></a>
              <button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
                <i class="icon-arrow-up"></i>
              </button>
              <a href="#" class="btn-close"><i class="icon-close"></i></a>
            </div>
          </div>
          <div class="card-block">
            <h6>Size Small <small>Add this class <code>.btn-sm</code></small></h6>
            <p>
              <button type="button" class="btn btn-sm btn-facebook"><span>Facebook</span></button>
              <button type="button" class="btn btn-sm btn-twitter"><span>Twitter</span></button>
              <button type="button" class="btn btn-sm btn-linkedin"><span>LinkedIn</span></button>
              <button type="button" class="btn btn-sm btn-flickr"><span>Flickr</span></button>
              <button type="button" class="btn btn-sm btn-tumblr"><span>Tumblr</span></button>
              <button type="button" class="btn btn-sm btn-xing"><span>Xing</span></button>
              <button type="button" class="btn btn-sm btn-github"><span>Github</span></button>
              <button type="button" class="btn btn-sm btn-html5"><span>HTML5</span></button>
              <button type="button" class="btn btn-sm btn-openid"><span>OpenID</span></button>
              <button type="button" class="btn btn-sm btn-stack-overflow"><span>StackOverflow</span></button>
              <button type="button" class="btn btn-sm btn-css3"><span>CSS3</span></button>
              <button type="button" class="btn btn-sm btn-youtube"><span>YouTube</span></button>
              <button type="button" class="btn btn-sm btn-dribbble"><span>Dribbble</span></button>
              <button type="button" class="btn btn-sm btn-google-plus"><span>Google+</span></button>
              <button type="button" class="btn btn-sm btn-instagram"><span>Instagram</span></button>
              <button type="button" class="btn btn-sm btn-pinterest"><span>Pinterest</span></button>
              <button type="button" class="btn btn-sm btn-vk"><span>VK</span></button>
              <button type="button" class="btn btn-sm btn-yahoo"><span>Yahoo</span></button>
              <button type="button" class="btn btn-sm btn-behance"><span>Behance</span></button>
              <button type="button" class="btn btn-sm btn-dropbox"><span>Dropbox</span></button>
              <button type="button" class="btn btn-sm btn-reddit"><span>Reddit</span></button>
              <button type="button" class="btn btn-sm btn-spotify"><span>Spotify</span></button>
              <button type="button" class="btn btn-sm btn-vine"><span>Vine</span></button>
              <button type="button" class="btn btn-sm btn-foursquare"><span>Forsquare</span></button>
              <button type="button" class="btn btn-sm btn-vimeo"><span>Vimeo</span></button>
            </p>
            <h6>Size Normal</h6>
            <p>
              <button type="button" class="btn btn-facebook"><span>Facebook</span></button>
              <button type="button" class="btn btn-twitter"><span>Twitter</span></button>
              <button type="button" class="btn btn-linkedin"><span>LinkedIn</span></button>
              <button type="button" class="btn btn-flickr"><span>Flickr</span></button>
              <button type="button" class="btn btn-tumblr"><span>Tumblr</span></button>
              <button type="button" class="btn btn-xing"><span>Xing</span></button>
              <button type="button" class="btn btn-github"><span>Github</span></button>
              <button type="button" class="btn btn-html5"><span>HTML5</span></button>
              <button type="button" class="btn btn-openid"><span>OpenID</span></button>
              <button type="button" class="btn btn-stack-overflow"><span>StackOverflow</span></button>
              <button type="button" class="btn btn-css3"><span>CSS3</span></button>
              <button type="button" class="btn btn-youtube"><span>YouTube</span></button>
              <button type="button" class="btn btn-dribbble"><span>Dribbble</span></button>
              <button type="button" class="btn btn-google-plus"><span>Google+</span></button>
              <button type="button" class="btn btn-instagram"><span>Instagram</span></button>
              <button type="button" class="btn btn-pinterest"><span>Pinterest</span></button>
              <button type="button" class="btn btn-vk"><span>VK</span></button>
              <button type="button" class="btn btn-yahoo"><span>Yahoo</span></button>
              <button type="button" class="btn btn-behance"><span>Behance</span></button>
              <button type="button" class="btn btn-dropbox"><span>Dropbox</span></button>
              <button type="button" class="btn btn-reddit"><span>Reddit</span></button>
              <button type="button" class="btn btn-spotify"><span>Spotify</span></button>
              <button type="button" class="btn btn-vine"><span>Vine</span></button>
              <button type="button" class="btn btn-foursquare"><span>Forsquare</span></button>
              <button type="button" class="btn btn-vimeo"><span>Vimeo</span></button>
            </p>
            <h6>Size Large <small>Add this class <code>.btn-lg</code></small></h6>
            <p>
              <button type="button" class="btn btn-lg btn-facebook"><span>Facebook</span></button>
              <button type="button" class="btn btn-lg btn-twitter"><span>Twitter</span></button>
              <button type="button" class="btn btn-lg btn-linkedin"><span>LinkedIn</span></button>
              <button type="button" class="btn btn-lg btn-flickr"><span>Flickr</span></button>
              <button type="button" class="btn btn-lg btn-tumblr"><span>Tumblr</span></button>
              <button type="button" class="btn btn-lg btn-xing"><span>Xing</span></button>
              <button type="button" class="btn btn-lg btn-github"><span>Github</span></button>
              <button type="button" class="btn btn-lg btn-html5"><span>HTML5</span></button>
              <button type="button" class="btn btn-lg btn-openid"><span>OpenID</span></button>
              <button type="button" class="btn btn-lg btn-stack-overflow"><span>StackOverflow</span></button>
              <button type="button" class="btn btn-lg btn-css3"><span>CSS3</span></button>
              <button type="button" class="btn btn-lg btn-youtube"><span>YouTube</span></button>
              <button type="button" class="btn btn-lg btn-dribbble"><span>Dribbble</span></button>
              <button type="button" class="btn btn-lg btn-google-plus"><span>Google+</span></button>
              <button type="button" class="btn btn-lg btn-instagram"><span>Instagram</span></button>
              <button type="button" class="btn btn-lg btn-pinterest"><span>Pinterest</span></button>
              <button type="button" class="btn btn-lg btn-vk"><span>VK</span></button>
              <button type="button" class="btn btn-lg btn-yahoo"><span>Yahoo</span></button>
              <button type="button" class="btn btn-lg btn-behance"><span>Behance</span></button>
              <button type="button" class="btn btn-lg btn-dropbox"><span>Dropbox</span></button>
              <button type="button" class="btn btn-lg btn-reddit"><span>Reddit</span></button>
              <button type="button" class="btn btn-lg btn-spotify"><span>Spotify</span></button>
              <button type="button" class="btn btn-lg btn-vine"><span>Vine</span></button>
              <button type="button" class="btn btn-lg btn-foursquare"><span>Forsquare</span></button>
              <button type="button" class="btn btn-lg btn-vimeo"><span>Vimeo</span></button>
            </p>
          </div>
        </div>
      </div><!--/.col-->

      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <strong>Social Media Button</strong> <small>Only icons. Usage ex.</small> <code style="text-transform:lowercase">&lt;button class="btn btn-facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code>
            <div class="card-actions">
              <a href="#" class="btn-setting"><i class="icon-settings"></i></a>
              <button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
                <i class="icon-arrow-up"></i>
              </button>
              <a href="#" class="btn-close"><i class="icon-close"></i></a>
            </div>
          </div>
          <div class="card-block">
            <h6>Size Small <small>Add this class <code>.btn-sm</code></small></h6>
            <p>
              <button type="button" class="btn btn-sm btn-facebook icon"><span>Facebook</span></button>
              <button type="button" class="btn btn-sm btn-twitter icon"><span>Twitter</span></button>
              <button type="button" class="btn btn-sm btn-linkedin icon"><span>LinkedIn</span></button>
              <button type="button" class="btn btn-sm btn-flickr icon"><span>Flickr</span></button>
              <button type="button" class="btn btn-sm btn-tumblr icon"><span>Tumblr</span></button>
              <button type="button" class="btn btn-sm btn-xing icon"><span>Xing</span></button>
              <button type="button" class="btn btn-sm btn-github icon"><span>Github</span></button>
              <button type="button" class="btn btn-sm btn-html5 icon"><span>HTML5</span></button>
              <button type="button" class="btn btn-sm btn-openid icon"><span>OpenID</span></button>
              <button type="button" class="btn btn-sm btn-stack-overflow icon"><span>StackOverflow</span></button>
              <button type="button" class="btn btn-sm btn-css3 icon"><span>CSS3</span></button>
              <button type="button" class="btn btn-sm btn-youtube icon"><span>YouTube</span></button>
              <button type="button" class="btn btn-sm btn-dribbble icon"><span>Dribbble</span></button>
              <button type="button" class="btn btn-sm btn-google-plus icon"><span>Google+</span></button>
              <button type="button" class="btn btn-sm btn-instagram icon"><span>Instagram</span></button>
              <button type="button" class="btn btn-sm btn-pinterest icon"><span>Pinterest</span></button>
              <button type="button" class="btn btn-sm btn-vk icon"><span>VK</span></button>
              <button type="button" class="btn btn-sm btn-yahoo icon"><span>Yahoo</span></button>
              <button type="button" class="btn btn-sm btn-behance icon"><span>Behance</span></button>
              <button type="button" class="btn btn-sm btn-dropbox icon"><span>Dropbox</span></button>
              <button type="button" class="btn btn-sm btn-reddit icon"><span>Reddit</span></button>
              <button type="button" class="btn btn-sm btn-spotify icon"><span>Spotify</span></button>
              <button type="button" class="btn btn-sm btn-vine icon"><span>Vine</span></button>
              <button type="button" class="btn btn-sm btn-foursquare icon"><span>Forsquare</span></button>
              <button type="button" class="btn btn-sm btn-vimeo icon"><span>Vimeo</span></button>
            </p>
            <h6>Size Normal</h6>
            <p>
              <button type="button" class="btn btn-facebook icon"><span>Facebook</span></button>
              <button type="button" class="btn btn-twitter icon"><span>Twitter</span></button>
              <button type="button" class="btn btn-linkedin icon"><span>LinkedIn</span></button>
              <button type="button" class="btn btn-flickr icon"><span>Flickr</span></button>
              <button type="button" class="btn btn-tumblr icon"><span>Tumblr</span></button>
              <button type="button" class="btn btn-xing icon"><span>Xing</span></button>
              <button type="button" class="btn btn-github icon"><span>Github</span></button>
              <button type="button" class="btn btn-html5 icon"><span>HTML5</span></button>
              <button type="button" class="btn btn-openid icon"><span>OpenID</span></button>
              <button type="button" class="btn btn-stack-overflow icon"><span>StackOverflow</span></button>
              <button type="button" class="btn btn-css3 icon"><span>CSS3</span></button>
              <button type="button" class="btn btn-youtube icon"><span>YouTube</span></button>
              <button type="button" class="btn btn-dribbble icon"><span>Dribbble</span></button>
              <button type="button" class="btn btn-google-plus icon"><span>Google+</span></button>
              <button type="button" class="btn btn-instagram icon"><span>Instagram</span></button>
              <button type="button" class="btn btn-pinterest icon"><span>Pinterest</span></button>
              <button type="button" class="btn btn-vk icon"><span>VK</span></button>
              <button type="button" class="btn btn-yahoo icon"><span>Yahoo</span></button>
              <button type="button" class="btn btn-behance icon"><span>Behance</span></button>
              <button type="button" class="btn btn-dropbox icon"><span>Dropbox</span></button>
              <button type="button" class="btn btn-reddit icon"><span>Reddit</span></button>
              <button type="button" class="btn btn-spotify icon"><span>Spotify</span></button>
              <button type="button" class="btn btn-vine icon"><span>Vine</span></button>
              <button type="button" class="btn btn-foursquare icon"><span>Forsquare</span></button>
              <button type="button" class="btn btn-vimeo icon"><span>Vimeo</span></button>
            </p>
            <h6>Size Large <small>Add this class <code>.btn-lg</code></small></h6>
            <p>
              <button type="button" class="btn btn-lg btn-facebook icon"><span>Facebook</span></button>
              <button type="button" class="btn btn-lg btn-twitter icon"><span>Twitter</span></button>
              <button type="button" class="btn btn-lg btn-linkedin icon"><span>LinkedIn</span></button>
              <button type="button" class="btn btn-lg btn-flickr icon"><span>Flickr</span></button>
              <button type="button" class="btn btn-lg btn-tumblr icon"><span>Tumblr</span></button>
              <button type="button" class="btn btn-lg btn-xing icon"><span>Xing</span></button>
              <button type="button" class="btn btn-lg btn-github icon"><span>Github</span></button>
              <button type="button" class="btn btn-lg btn-html5 icon"><span>HTML5</span></button>
              <button type="button" class="btn btn-lg btn-openid icon"><span>OpenID</span></button>
              <button type="button" class="btn btn-lg btn-stack-overflow icon"><span>StackOverflow</span></button>
              <button type="button" class="btn btn-lg btn-css3 icon"><span>CSS3</span></button>
              <button type="button" class="btn btn-lg btn-youtube icon"><span>YouTube</span></button>
              <button type="button" class="btn btn-lg btn-dribbble icon"><span>Dribbble</span></button>
              <button type="button" class="btn btn-lg btn-google-plus icon"><span>Google+</span></button>
              <button type="button" class="btn btn-lg btn-instagram icon"><span>Instagram</span></button>
              <button type="button" class="btn btn-lg btn-pinterest icon"><span>Pinterest</span></button>
              <button type="button" class="btn btn-lg btn-vk icon"><span>VK</span></button>
              <button type="button" class="btn btn-lg btn-yahoo icon"><span>Yahoo</span></button>
              <button type="button" class="btn btn-lg btn-behance icon"><span>Behance</span></button>
              <button type="button" class="btn btn-lg btn-dropbox icon"><span>Dropbox</span></button>
              <button type="button" class="btn btn-lg btn-reddit icon"><span>Reddit</span></button>
              <button type="button" class="btn btn-lg btn-spotify icon"><span>Spotify</span></button>
              <button type="button" class="btn btn-lg btn-vine icon"><span>Vine</span></button>
              <button type="button" class="btn btn-lg btn-foursquare icon"><span>Forsquare</span></button>
              <button type="button" class="btn btn-lg btn-vimeo icon"><span>Vimeo</span></button>
            </p>
          </div>
        </div>
      </div><!--/.col-->

      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <strong>Social Media Button</strong> <small>Only text. Usage ex.</small> <code style="text-transform:lowercase">&lt;button class="btn btn-facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code>
            <div class="card-actions">
              <a href="#" class="btn-setting"><i class="icon-settings"></i></a>
              <button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
                <i class="icon-arrow-up"></i>
              </button>
              <a href="#" class="btn-close"><i class="icon-close"></i></a>
            </div>
          </div>
          <div class="card-block">
            <h6>Size Small <small>Add this class <code>.btn-sm</code></small></h6>
            <p>
              <button type="button" class="btn btn-sm btn-facebook text"><span>Facebook</span></button>
              <button type="button" class="btn btn-sm btn-twitter text"><span>Twitter</span></button>
              <button type="button" class="btn btn-sm btn-linkedin text"><span>LinkedIn</span></button>
              <button type="button" class="btn btn-sm btn-flickr text"><span>Flickr</span></button>
              <button type="button" class="btn btn-sm btn-tumblr text"><span>Tumblr</span></button>
              <button type="button" class="btn btn-sm btn-xing text"><span>Xing</span></button>
              <button type="button" class="btn btn-sm btn-github text"><span>Github</span></button>
              <button type="button" class="btn btn-sm btn-html5 text"><span>HTML5</span></button>
              <button type="button" class="btn btn-sm btn-openid text"><span>OpenID</span></button>
              <button type="button" class="btn btn-sm btn-stack-overflow text"><span>StackOverflow</span></button>
              <button type="button" class="btn btn-sm btn-css3 text"><span>CSS3</span></button>
              <button type="button" class="btn btn-sm btn-youtube text"><span>YouTube</span></button>
              <button type="button" class="btn btn-sm btn-dribbble text"><span>Dribbble</span></button>
              <button type="button" class="btn btn-sm btn-google-plus text"><span>Google+</span></button>
              <button type="button" class="btn btn-sm btn-instagram text"><span>Instagram</span></button>
              <button type="button" class="btn btn-sm btn-pinterest text"><span>Pinterest</span></button>
              <button type="button" class="btn btn-sm btn-vk text"><span>VK</span></button>
              <button type="button" class="btn btn-sm btn-yahoo text"><span>Yahoo</span></button>
              <button type="button" class="btn btn-sm btn-behance text"><span>Behance</span></button>
              <button type="button" class="btn btn-sm btn-dropbox text"><span>Dropbox</span></button>
              <button type="button" class="btn btn-sm btn-reddit text"><span>Reddit</span></button>
              <button type="button" class="btn btn-sm btn-spotify text"><span>Spotify</span></button>
              <button type="button" class="btn btn-sm btn-vine text"><span>Vine</span></button>
              <button type="button" class="btn btn-sm btn-foursquare text"><span>Forsquare</span></button>
              <button type="button" class="btn btn-sm btn-vimeo text"><span>Vimeo</span></button>
            </p>
            <h6>Size Normal</h6>
            <p>
              <button type="button" class="btn btn-facebook text"><span>Facebook</span></button>
              <button type="button" class="btn btn-twitter text"><span>Twitter</span></button>
              <button type="button" class="btn btn-linkedin text"><span>LinkedIn</span></button>
              <button type="button" class="btn btn-flickr text"><span>Flickr</span></button>
              <button type="button" class="btn btn-tumblr text"><span>Tumblr</span></button>
              <button type="button" class="btn btn-xing text"><span>Xing</span></button>
              <button type="button" class="btn btn-github text"><span>Github</span></button>
              <button type="button" class="btn btn-html5 text"><span>HTML5</span></button>
              <button type="button" class="btn btn-openid text"><span>OpenID</span></button>
              <button type="button" class="btn btn-stack-overflow text"><span>StackOverflow</span></button>
              <button type="button" class="btn btn-css3 text"><span>CSS3</span></button>
              <button type="button" class="btn btn-youtube text"><span>YouTube</span></button>
              <button type="button" class="btn btn-dribbble text"><span>Dribbble</span></button>
              <button type="button" class="btn btn-google-plus text"><span>Google+</span></button>
              <button type="button" class="btn btn-instagram text"><span>Instagram</span></button>
              <button type="button" class="btn btn-pinterest text"><span>Pinterest</span></button>
              <button type="button" class="btn btn-vk text"><span>VK</span></button>
              <button type="button" class="btn btn-yahoo text"><span>Yahoo</span></button>
              <button type="button" class="btn btn-behance text"><span>Behance</span></button>
              <button type="button" class="btn btn-dropbox text"><span>Dropbox</span></button>
              <button type="button" class="btn btn-reddit text"><span>Reddit</span></button>
              <button type="button" class="btn btn-spotify text"><span>Spotify</span></button>
              <button type="button" class="btn btn-vine text"><span>Vine</span></button>
              <button type="button" class="btn btn-foursquare text"><span>Forsquare</span></button>
              <button type="button" class="btn btn-vimeo text"><span>Vimeo</span></button>
            </p>
            <h6>Size Large <small>Add this class <code>.btn-lg</code></small></h6>
            <p>
              <button type="button" class="btn btn-lg btn-facebook text"><span>Facebook</span></button>
              <button type="button" class="btn btn-lg btn-twitter text"><span>Twitter</span></button>
              <button type="button" class="btn btn-lg btn-linkedin text"><span>LinkedIn</span></button>
              <button type="button" class="btn btn-lg btn-flickr text"><span>Flickr</span></button>
              <button type="button" class="btn btn-lg btn-tumblr text"><span>Tumblr</span></button>
              <button type="button" class="btn btn-lg btn-xing text"><span>Xing</span></button>
              <button type="button" class="btn btn-lg btn-github text"><span>Github</span></button>
              <button type="button" class="btn btn-lg btn-html5 text"><span>HTML5</span></button>
              <button type="button" class="btn btn-lg btn-openid text"><span>OpenID</span></button>
              <button type="button" class="btn btn-lg btn-stack-overflow text"><span>StackOverflow</span></button>
              <button type="button" class="btn btn-lg btn-css3 text"><span>CSS3</span></button>
              <button type="button" class="btn btn-lg btn-youtube text"><span>YouTube</span></button>
              <button type="button" class="btn btn-lg btn-dribbble text"><span>Dribbble</span></button>
              <button type="button" class="btn btn-lg btn-google-plus text"><span>Google+</span></button>
              <button type="button" class="btn btn-lg btn-instagram text"><span>Instagram</span></button>
              <button type="button" class="btn btn-lg btn-pinterest text"><span>Pinterest</span></button>
              <button type="button" class="btn btn-lg btn-vk text"><span>VK</span></button>
              <button type="button" class="btn btn-lg btn-yahoo text"><span>Yahoo</span></button>
              <button type="button" class="btn btn-lg btn-behance text"><span>Behance</span></button>
              <button type="button" class="btn btn-lg btn-dropbox text"><span>Dropbox</span></button>
              <button type="button" class="btn btn-lg btn-reddit text"><span>Reddit</span></button>
              <button type="button" class="btn btn-lg btn-spotify text"><span>Spotify</span></button>
              <button type="button" class="btn btn-lg btn-vine text"><span>Vine</span></button>
              <button type="button" class="btn btn-lg btn-foursquare text"><span>Forsquare</span></button>
              <button type="button" class="btn btn-lg btn-vimeo text"><span>Vimeo</span></button>
            </p>
          </div>
        </div>
      </div><!--/.col-->
    </div><!--/.row-->
  </div>
</template>

<script>
export default {
  name: 'social-buttons'
}
</script>

<style scoped lang="css">
  .btn {
     margin-bottom: 4px;
  }
</style>
